<script setup>

import moment from "moment/moment.js";
import {onBeforeMount, ref} from "vue";
import {deleteById, searchUnStructuredDatas, updateEnable} from "@/api/http/chat-knowledge.js";
import {userInfo} from "@/stores/userStore.js";
import ChatKnowledgeDocumentAdd from "@/components/knowledge/struct/chat-knowledge-document-add.vue";
import ChatKnowledgeDocumentUpdate from "@/components/knowledge/struct/chat-knowledge-document-update.vue";
import {ElMessage} from "element-plus";

const tableData = ref([]);
const tableLoading = ref(false);
const drawerShow = ref(false);
const refShowMode = ref(1);


const searchTableDatasFunc = async () => {
  tableLoading.value = true;
  await searchUnStructuredDatas({
    "userId": userInfo().userId,
    'knowledgeType': 'struct'
  })
      .then(res => {
        tableData.value = res.data.data
        tableLoading.value = false;
      })
      .catch(res => {
        tableLoading.value = false;
      })
}

const openDialogFunc = ({showMode}) => {
  refShowMode.value = showMode;
  drawerShow.value = true;

}

const updateEnableStatusFunc = (param) => {
  updateEnable(param)
      .then((res) => {
        if (res.data.data) {
          ElMessage({
            type: "success",
            message: "启用状态更新成功!"
          })
        }
      })
}
const deleteByIdFunc = (id) => {
  deleteById(id)
      .then(res => {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
        searchTableDatasFunc();
      })
}

onBeforeMount(async () => {
  await searchTableDatasFunc();
})
</script>

<template>
  <div class="struct-wrapper">
    <div style="flex-grow:1">
      <el-row>
        <el-col :span="8">
          <el-button
              type="primary"
              plain
              @click="openDialogFunc({'showMode':1})"
          >新增
          </el-button>
        </el-col>
        <el-col :span="16">
          <el-form inline
                   style="display: flex;
           align-items: center;
           justify-content: flex-end;
           flex-direction: row;
"
          >

            <el-form-item label="标题">
              <el-input
              />
            </el-form-item>
            <el-form-item>

              <el-button
                  @click="searchTableDatasFunc"
              >搜索
              </el-button>

            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-table
          row-key="id"
          :data="tableData"
          max-height="80vh"
          v-loading="tableLoading"
      >
        <template #empty
        >
          点击导入按钮进行上传文件吧
        </template>
        <el-table-column align="center" type="index" :index="index => index+1"/>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="contentPrefix" label="内容摘要"></el-table-column>
        <el-table-column label="文档状态">
          <template #default="{row}">
            <el-popover
                width="600px"
                placement="top-start"
            >
              <el-timeline>
                <el-timeline-item
                    v-for="(activity, index) in row.operateList??[]"
                    :key="index"
                    :timestamp="activity.operateTime"
                >
                  {{
                    `${activity.statusText}${(activity.msg === null || activity.msg === '') ? '' : "(" + activity.msg + ")"}`
                  }}
                </el-timeline-item>
              </el-timeline>
              <template #reference>
                <el-tag type="info">{{ row.statusText }}</el-tag>
              </template>

            </el-popover>

          </template>
        </el-table-column>

        <el-table-column align="center" label="更新时间" prop="modifyTime">
          <template #default="{row}">
            <div style="display: flex;align-items: center;justify-content: center">
              <el-icon style="margin-right: 8px">
                <timer/>
              </el-icon>
              <el-text>{{ moment(row.modifyTime).format('YYYY-MM-DD HH:mm') }}</el-text>
            </div>

          </template>
        </el-table-column>
        <el-table-column align="center" label="操作人" prop="createBy"></el-table-column>
        <el-table-column align="center" label="启用">
          <template #default="{row}">
            <el-switch
                @change="updateEnableStatusFunc({
                  'recordId':row.id,
                  'enable':row.enable
                })"
                v-model="row.enable"
                :active-value="1"
                :inactive-value="0"
            />
          </template>
        </el-table-column>


        <el-table-column
            width="240px"
            align="center" label="操作">
          <template #default="{row,scope}"
          >
            <el-button type="info"
                       plain
                       @click="openDialogFunc({'showMode':2})"
                       size="small"
                       :disabled="!row?.permission?.enablePreview"
            >查看
            </el-button>
            <el-button type="success"
                       size="small"
                       :disabled="!row?.permission?.enableAiBtn"
                       plain>AI
            </el-button>
            <el-button type="warning" size="small"
                       :disabled="!row?.permission?.enableLoad"
                       plain>重试
            </el-button>

            <el-popconfirm
                title="确认要删除吗?"
                placement="bottom-start"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="deleteByIdFunc(row.id)"
            >
              <template #reference>
                <el-button type="danger" size="small"
                           :disabled="!row?.permission?.enableDeleted"
                           plain>删除
                </el-button>
              </template>
            </el-popconfirm>

          </template>

        </el-table-column>
      </el-table>
    </div>

  </div>

  <el-drawer
      direction="rtl"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      size="90%"
      v-model="drawerShow"
      :with-header="false "
  >
    <chat-knowledge-document-add
        v-if="refShowMode===1"
        @close="drawerShow=false"
        @refreshList="searchTableDatasFunc"
    />

    <chat-knowledge-document-update
        v-if="refShowMode===2"
        @close="drawerShow=false"
        @refreshList="searchTableDatasFunc"
    />
  </el-drawer>
</template>

<style scoped lang="scss">
.struct-wrapper {
  display: flex;
  flex-direction: column;

  & > div {
    margin: 0 16px 0 16px
  }
}
</style>